<template>
  <el-container>
    <el-main>
      <el-button v-if="isEmpty(goods.data) && modal.params.type == 'add'" @click="selectGoods"
        >选择商品</el-button
      >
      <template v-if="!isEmpty(goods.data)">
        <div class="title sa-m-b-20">商品名称：{{ goods.data.title }}</div>
        <div class="sku-table-wrap">
          <table class="sku-table" rules="none">
            <thead>
              <tr>
                <th class="sku-item" v-for="ss in goods.skus" :key="ss">
                  {{ ss.name }}
                </th>
                <th class="sku-item">是否参与</th>
                <th class="sku-item">商品价格</th>
                <th class="sku-item">可兑换数量</th>
                <th class="sku-item">兑换积分</th>
                <th class="sku-item">兑换价格</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(sp, spindex) in goods.skuPrice" :key="sp">
                <td class="sku-item" v-for="st in sp.goods_sku_text" :key="st">
                  {{ st }}
                </td>
                <td class="sku-item">
                  <el-switch
                    v-model="goods.score_sku_prices[spindex].status"
                    active-value="up"
                    inactive-value="down"
                  />
                </td>
                <td class="sku-item">{{ sp.price }}</td>
                <th class="sku-item">
                  <el-input
                    v-if="goods.score_sku_prices[spindex].status == 'up'"
                    type="number"
                    v-model="goods.score_sku_prices[spindex].stock"
                  ></el-input>
                </th>
                <th class="sku-item">
                  <el-input
                    v-if="goods.score_sku_prices[spindex].status == 'up'"
                    type="number"
                    v-model="goods.score_sku_prices[spindex].score"
                  ></el-input>
                </th>
                <th class="sku-item">
                  <el-input
                    v-if="goods.score_sku_prices[spindex].status == 'up'"
                    type="number"
                    v-model="goods.score_sku_prices[spindex].price"
                  ></el-input>
                </th>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button
        v-if="modal.params.type == 'add'"
        v-auth="'shop.admin.app.scoreshop.add'"
        type="primary"
        @click="modelBack"
        >保存</el-button
      >
      <el-button
        v-if="modal.params.type == 'edit'"
        v-auth="'shop.admin.app.scoreshop.edit'"
        type="primary"
        @click="modelBack"
        >更新</el-button
      >
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from '../app.service';
  import { api as goodsApi } from '@/app/shop/admin/goods/goods.service';
  import { useModal } from '@/sheep/hooks';
  import { isEmpty } from 'lodash';
  import { ElMessage } from 'element-plus';
  import GoodsSelect from '../../goods/goods/select.vue';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);

  function selectGoods() {
    useModal(
      GoodsSelect,
      {
        title: '选择商品',
        ftype: 'score_shop',
      },
      {
        confirm: (res) => {
          goods.data = res.data;
          getSkus(res.data.id);
        },
      },
    );
  }

  const goods = reactive({
    data: props.modal.params.data || {},
    skus: [],
    skuPrice: [],
    score_sku_prices: [],
  });

  async function getSkus(id) {
    const { data } = await api.scoreShop.skus(id);
    goods.skus = data.skus;
    goods.skuPrice = data.sku_prices;
    goods.score_sku_prices = data.score_sku_prices;
  }

  async function modelBack() {
    let flag = true;
    goods.score_sku_prices.forEach((s) => {
      if (s.status == 'up' && s.score <= 0) {
        flag = false;
      }
    });
    if (!flag) {
      ElMessage({
        message: '兑换积分必须大于0',
        type: 'warning',
      });
      return false;
    }

    const { error } =
      props.modal.params.type == 'add'
        ? await api.scoreShop.add({
            goods_id: goods.data.id,
            sku_prices: goods.score_sku_prices,
          })
        : await api.scoreShop.edit(goods.data.id, {
            sku_prices: goods.score_sku_prices,
          });
    if (error == 0) {
      emit('modalCallBack', { event: 'confirm' });
    }
  }

  onMounted(() => {
    if (props.modal.params.type == 'edit') {
      getSkus(props.modal.params.data.id);
    }
  });
</script>
<style lang="scss" scoped>
  .title {
    line-height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: var(--sa-subtitle);
  }
  .sku-table-wrap {
    width: 100%;
    overflow: auto;
    .sku-table {
      font-size: 12px;
      font-weight: 500;
      thead {
        line-height: 40px;
        background: var(--sa-table-header-bg);
        color: var(--subtitle);
      }
      tbody {
        tr {
          line-height: 48px;
          color: var(--sa-font);
          &:nth-of-type(2n) {
            background: var(--sa-table-striped);
          }
        }
      }
      th,
      td {
        padding: 0 16px;
        text-align: left;
      }
    }
    .sku-item {
      min-width: 100px;
      flex-shrink: 0;
    }
  }
</style>
